<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
    <table border="1" b align="center" cellpadding="3px" width="800px">
        <thead>
            <tr>
                <td>选择</td>
                <td>编号</td>
                <td>部门名称</td>
                <td>部门位置</td>
                <td>编辑</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody id="listBody">

        </tbody>
        <tfoot align="center">
            <tr>
                <td colspan="6">
                    <font >
                        <button onclick="pageHelper(1)">首页</button>
                        <button onclick="pageHelper()">上一页</button>
                        <button onclick="pageHelper()">下一页</button>
                        <button onclick="pageHelper()">末页</button>
                    </font>
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
 $(function(){
     showList();
 });

 function showList(page){
     $.ajax({
         url : "dept",
         type : "post",
         data : {"nowPage":page},
         dataType : "json",
         error : function(err){
             alert("失败");
         },
         success : function (data) {
             // $("#listBody").empty();
             var listBody="";
             $.each(data.deptList,function (index,dept) {
                 listBody+="<tr>";
                 listBody+="<td><input type='checkbox' name='deleteCheck' value="+dept.deptId+"/></td>";
                 listBody+="<td>"+dept.deptId+"</td>";
                 listBody+="<td>"+dept.deptName+"</td>";
                 listBody+="<td>"+dept.deptAddr+"</td>";
                 listBody+="<td><button type='button' onclick='updateDept("+dept.deptId+")'>编辑</button></td>";
                 listBody+="<td><button type='button' onclick='deleteDept("+dept.deptId+")'>删除</button></td>";
                 listBody+="</tr>";
                 $("#listBody").html(listBody);
             });

         }
     });
 }

 function updateDept(deptId) {

 }

 function deleteDept(deptId) {

 }

 function pageHelper(page){
     showList(page);
 }

</script>